<template>
  <div class="m-tab-select">
    <!-- tab选项卡 -->
    <div class="options">
      <span :class="{'actived': curIndex == index}" v-for="(item, index) in options" :key="index" @click="onChange(item, index)">{{item.label}}</span>
    </div>
    <div class="tab-container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default() {
        return [
          {
            'label': '项目情况',
            'value': '项目情况'
          },
          {
            'label': '风险措施',
            'value': '风险措施'
          },
          {
            'label': '还款计划',
            'value': '还款计划'
          },
          {
            'label': '投资记录',
            'value': '投资记录'
          }
        ]
      }
    }
  },
  data() {
    return {
      curIndex: 0
    }
  },
  methods: {
    /**
     * 更改当前选项卡
     */
    onChange(tab, index) {
      this.curIndex = index
      this.$emit('on-change', this.curIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/_var.scss';
.m-tab-select {
  padding: 0 20px;
  background-color: $color-white
}
.options {
  text-align: left;
  font-size: 14px;
  padding: 20px 0;
  border-bottom: 1px solid #F2F2F2;
  span {
    cursor: pointer;
    margin-right: 30px;
    padding-bottom: 19px;
    color: #878787;
    &::first-child {
      margin-right: 0
    }
    &.actived {
      color: $color-main;
      border-bottom: 2px solid $color-main;
    }
  }
}
.tab-container {
  width: 100%;
  // min-height: 200px;
  padding: 20px 0
}
</style>
